<template>
  <div class="app">
    <h1>{{msg}}, 学生姓名:{{studentName}}</h1>
    <hr>
<!--    通过父组件给子组件传递函数类型的props实现： 子给父传递数据-->
    <School :getSchoolName="getSchoolName"></School>
<!-- 由于v-on在Student组件标签上 Student组件实例对象vc上绑定了一个事件叫atguigu，若有人触发了该事件
  那么 demo函数就会被调用 -->
    <!--    通过父组件给子组件绑定一个自定义事件实现： 子给父传递数据-->
<!--    <Student v-on:atguigu="getStudentName" @demo="m1"></Student>-->

<!--   @click.native代表的是原生的事件
  把click事件交给了Student 组件 最外层的元素 大的div

 -->
    <Student ref="student" @click.native="show"></Student>
  </div>

</template>
<script>
//引入组件
import School from "./components/School.vue";
import Student from "./components/Student.vue";

export default {
  name: 'App',
  components: {
    School: School,
    Student: Student
  },
  data:function (){
    return {
      msg:'你好啊',
      studentName:''
    }
  },
  methods:{
    getSchoolName:function (name){
      console.log('app收到了学校名：',name)
    },
    getStudentName:function (e){
      console.log('app收到了学生姓名：',e)
      this.studentName = e
    },
    m1:function (){
      console.log('demo事件被触发')
    },
    show:function (){
      console.log('123123')
    }
  },
  mounted() {
    // 箭头函数没有this，所以只能往外去找
    // this.$refs.student.$on('atguigu',(...params)=>{
    //   this.studentName = params[0]
    // })
    this.$refs.student.$on('atguigu',this.getStudentName)
  }


}
</script>
<style scoped>

.app{
  background-color: gray;
  padding: 5px;
}


</style>
